<template>
  <div class="user-select-wrap">
    <el-select
      v-loadmore="userLoadMore"
      :value="userId"
      :filter-method="filterProposerData"
      :clearable="true"
      :placeholder="placeholder"
      :disabled="disabled"
      :class="userSelectClassName"
      popper-class="global-select-down"
      filterable
      default-first-option
      class="filterableSelect"
      @change="selectChange($event)"
    >
      <el-option
        v-for="(select) in proposerList.items"
        :key="select.id"
        :label="select.userName"
        :value="select.id" />
      <div v-if="proposerListLoading" class="loading-container"><i class="el-icon-loading"/></div>
    </el-select>
  </div>
</template>
<script>
import { getList as getUserList } from '@/api/user';
export default {
  name: 'UserSelect',
  model: {
    prop: 'userId',
    event: 'change'
  },
  props: {
    userSelectClassName: {
      type: String,
      default: ''
    },
    defaultProposerList: {
      type: Array,
      default: () => []
    },
    userId: {
      type: String | Number,
      default: ''
    },
    placeholder: {
      type: String,
      default: '请选择执行人'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    isGetList: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      proposerList: {
        items: [],
        total: 0,
        page: 1,
        perPage: 20,
        isInit: true
      },
      proposerListLoading: false
    };
  },
  watch: {
    defaultProposerList(newV) {
      // if (newV.length > 0) {
      this.proposerList.items = newV;
      this.getProposerList();
      // }
    },
    isGetList(newV) {
      if (newV) {
        // this.getProposerList();
      }
    }
  },
  mounted() {
    window.remoteRequest(`.${this.userSelectClassName}`, this.filterProposerData);
    window.removeReadOnly();
  },
  created() {
    this.getProposerList();
  },
  methods: {
    getProposerList(page = 1, userName = '') {
      this.proposerListLoading = true;
      // if (this.proposerList.total >= this.proposerList.items.length) {
      //   this.proposerListLoading = false;
      //   return;
      // }
      // console.log(this.defaultProposerList);
      getUserList(page, 15, { userName, type: 1 }).then(({ data }) => {
        this.proposerListLoading = false;
        if (page > 1 && this.proposerList.items) {
          data.items = this.handeldefaultList(data.items, this.defaultProposerList);
          const concatList = this.proposerList.items.concat(data.items);
          data.items = concatList;
          this.proposerList = data;
        } else {
          data.items = this.handeldefaultList(data.items, this.defaultProposerList);
          this.proposerList.items = this.defaultProposerList;
          if (!userName) {
            const concatList = this.proposerList.items.concat(data.items);
            data.items = concatList;
          }
          this.proposerList = data;
        }
      }, result => {
        this.proposerListLoading = false;
      }).catch(e => {
        console.error(e);
      });
    },
    // 从列表中去除 已经有的数据
    handeldefaultList(list, defaultList) {
      let res = [];
      if (list && list.length > 0) {
        const ids = defaultList.map(i => i.id);
        res = list.filter(i => {
          return !ids.includes(i.id);
        });
      }
      return res;
    },
    // 滚动加载更多申请人
    userLoadMore() {
      const proposerList = this.proposerList;
      const currentPage = proposerList.page;
      if (proposerList.items) {
        // const isMax = userList.items.length >= userList.total;
        if (this.proposerList.total <= this.proposerList.items.length) {
          this.proposerListLoading = false;
          return;
        }
        if (proposerList.items.length < 300 && !this.proposerListLoading) {
          this.getProposerList(currentPage + 1, this.proposerName);
        }
      }
    },
    // 过滤申请人
    filterProposerData(val) {
      this.test = val;
      this.proposerName = val;
      this.getProposerList(1, val);
    },
    selectChange(value) {
      this.$emit('change', value);
    }
  }
};
</script>
<style lang="scss" scoped>
.loading-container {
  width: 100%;
  text-align: center;
  i {
    color: #999;
  }
}
</style>
<style lang="scss">
.user-select-wrap {
  .el-input__suffix {
    // top: -4px;
    display: flex;
    align-items: center;
  }
}
</style>
